<template>
  <view class="book-flow">
    <h2 class="book-flow__title">
      <span class="book-flow__title-text">更多精彩</span>
    </h2>
    <view class="book-flow__inner">
      <navigator
        v-for="book in list"
        :key="book._id"
        :url="book._id ? `/pages/bookdetail/index?id=${book._id}` : ''"
        :class="{ 'book-flow__item': true, opacity: !book }"
        hover-class="none"
      >
        <view class="book-flow__info">
          <view class="book-flow__name">{{ book.name }}</view>
          <view class="book-flow__des">{{ book.des }}</view>
          <view class="book-flow__bottom">
            <text class="book-flow__bottom-author">{{ book.author }}</text>
            <text class="book-flow__first-classify">
              {{ book.classify.length > 0 ? book.classify[0] : '查看详情' }}
            </text>
          </view>
        </view>
        <LazyLoadImg
          class="book-flow__img"
          threshold="0"
          width="100%"
          height="109"
          img-mode="aspectFit"
          :image="book.img_url"
        />
      </navigator>
    </view>
    <template v-if="!loading">
      <view v-if="hasMore" class="book-flow__more" @click="handleClickMore">
        加载更多>>
      </view>
      <!-- <view v-else class="book-flow__more">暂无更多~</view> -->
    </template>
  </view>
</template>


<script>
import LazyLoadImg from '@/components/LazyLoadImg2';

export default {
  components: {
    LazyLoadImg,
  },

  data() {
    return {
      loading: true,
      page: 1,
      list: [],
    };
  },

  computed: {
    hasMore() {
      return this.list.length < this.total;
    },
  },

  methods: {
    // 获取主题数据
    getFlowBooks(init = false) {
      if (init) this.loading = true;
      this.$http({
        method: 'GET',
        url: '/api/front/book/flow',
        data: {
          page: this.page,
          limit: 5,
        },
      }).then((res) => {
        if (res.ok) {
          this.list = [...this.list, ...res.data.list];
          this.total = res.data.total;
          if (init) this.loading = true;
        }
      });
    },

    loadMoreData() {
      this.page = this.page + 1;
      this.getFlowBooks();
    },
  },

  created() {
    this.getFlowBooks();
  },
};
</script>

<style lang="scss">
.book-flow {
  margin-top: 16rpx;
  background: #fff;

  &__title {
    padding: 24rpx $page-row-spacing;
    margin: 0;
    color: $font-color-title;
    font-size: 28rpx;
    border-bottom: 1rpx solid $border-color-gray;
    line-height: 32rpx;
    font-weight: 400;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    &-text::before {
      content: ' ';
      display: inline-block;
      width: 8rpx;
      background: $font-color-main;
      height: 32rpx;
      vertical-align: top;
      border-radius: 6rpx;
      margin-right: 16rpx;
    }
  }

  &__item {
    border-bottom: 1px solid $border-color-gray;
    padding: 28rpx $page-row-spacing;
    overflow: hidden;
  }

  &__img {
    margin-right: 28rpx;
    width: 150rpx;
    height: 218rpx;
    float: left;
    margin-left: -100%;
  }

  &__info {
    float: left;
    width: 100%;
    padding-left: 178rpx;
  }

  &__name {
    color: $font-color-book-name;
    font-size: 30rpx;
    line-height: 1.5em;
  }

  &__des {
    color: $font-color-desc;
    font-size: 26rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.4em;
    margin-top: 10rpx;
    margin-bottom: 16rpx;
  }

  &__bottom {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    color: $font-color-desc;
    font-size: 26rpx;

    &-author {
      max-width: 150px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  &__classify {
    color: $font-color-desc;
    font-size: 26rpx;
  }

  &__more {
    padding: 12px 15px;
    font-size: $font-base;
    color: $font-color-normal;
    border-radius: 3px;
    text-align: center;
  }
}
</style>
